<template>
  <el-card class="page-container">
    <div class="inner">
      <div class="profile">
        <span class="avatar" @click="router.push('/profile/avatar')"><img :src="user.avatar" /></span>
        <div class="name">
          <div>{{ user.name }}</div>
          <div class="handleName">{{ user.userName }}</div>
        </div>
      </div>
      <div class="setting">
        <div class="block">
          <div class="block-content">
            <div class="container" @click="detailHandle">
              <span class="icon">
                <svg
                  t="1730365868506"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10862"
                  width="200"
                  height="200"
                >
                  <path
                    d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                    fill="#4373F9"
                    opacity=".6"
                    p-id="10863"
                  ></path>
                  <path
                    d="M735.650909 766.370909H287.022545c-9.262545 0-18.548364-4.608-24.343272-11.566545-5.794909-8.122182-8.098909-17.384727-5.794909-26.670546 23.179636-118.225455 119.389091-206.336 235.333818-215.621818 38.842182 0 80.849455 4.933818 122.88 22.039273 12.171636 4.910545 16.221091 8.098909 23.179636 11.589818 67.258182 38.237091 113.617455 104.331636 128.698182 181.992727 2.304 9.285818 0 18.548364-6.981818 26.670546a32.628364 32.628364 0 0 1-24.343273 11.589818z"
                    fill="#FFFFFF"
                    p-id="10864"
                  ></path>
                  <path
                    d="M287.604364 747.543273a11.636364 11.636364 0 0 1-9.262546-4.049455c-0.302545-0.279273-0.302545-0.581818-0.581818-0.861091-2.909091-2.909091-3.188364-7.842909-2.606545-10.728727 21.434182-110.126545 111.569455-192.721455 219.392-200.541091h8.680727c51.898182 0 101.725091 16.221091 126.068363 31.581091 63.767273 38.260364 106.356364 98.257455 119.691637 168.96a14.661818 14.661818 0 0 1-3.188364 11.589818 11.636364 11.636364 0 0 1-9.262545 4.049455h-448.930909z"
                    fill="#FFFFFF"
                    p-id="10865"
                  ></path>
                  <path
                    d="M503.226182 538.298182c50.432 0 98.816 15.662545 122.298182 30.440727h0.302545c61.998545 36.817455 103.168 95.069091 115.898182 164.026182 0.302545 1.466182 0.302545 3.490909-2.001455 6.097454-0.302545 0.581818-1.745455 1.163636-3.490909 1.163637H287.604364c-1.722182 0-3.188364-0.581818-3.490909-1.163637a3.490909 3.490909 0 0 0-1.419637-1.442909c-0.581818-0.581818-1.163636-2.327273-0.581818-4.352 20.852364-106.938182 108.078545-186.926545 212.712727-194.769454 2.606545 0.302545 5.515636 0 8.401455 0z m0-14.475637c-2.885818 0-6.074182 0-8.983273 0.279273-111.290182 8.122182-204.032 92.741818-226.048 206.359273-1.163636 5.794909 0 12.753455 4.631273 17.384727 3.490909 4.654545 9.285818 6.958545 15.080727 6.958546h448.628364c5.794909 0 11.589818-2.327273 15.057454-6.981819 3.490909-4.608 5.818182-10.402909 4.654546-17.361454-13.917091-74.193455-57.972364-135.051636-122.88-173.893818-24.645818-15.36-75.077818-32.744727-130.141091-32.744728z m8.704-0.884363c-73.029818 0-133.329455-60.276364-133.329455-133.306182s60.276364-133.306182 133.329455-133.306182c73.029818 0 133.306182 60.276364 133.306182 133.306182s-60.276364 133.306182-133.306182 133.306182z"
                    fill="#FFFFFF"
                    p-id="10866"
                  ></path>
                  <path
                    d="M511.930182 504.110545a114.525091 114.525091 0 0 1-114.501818-114.478545 114.525091 114.525091 0 0 1 114.501818-114.478545 114.525091 114.525091 0 0 1 114.478545 114.501818 114.525091 114.525091 0 0 1-114.501818 114.455272z"
                    fill="#FFFFFF"
                    p-id="10867"
                  ></path>
                  <path
                    d="M511.930182 282.414545a107.357091 107.357091 0 0 1 107.217454 107.217455 107.357091 107.357091 0 0 1-107.217454 107.240727 107.357091 107.357091 0 0 1-107.240727-107.240727 107.357091 107.357091 0 0 1 107.240727-107.217455z m0-14.498909a121.716364 121.716364 0 0 0-121.716364 121.716364 121.716364 121.716364 0 1 0 121.716364-121.716364z"
                    fill="#FFFFFF"
                    p-id="10868"
                  ></path>
                </svg>
              </span>
              <div class="underline-content">
                <div class="left">编辑个人资料</div>
                <el-icon :size="16">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="block-content">
            <div class="container" @click="router.push('/profile/pwd')">
              <span class="icon">
                <svg
                  t="1730365965329"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="13612"
                  width="200"
                  height="200"
                >
                  <path
                    d="M818 343.245h-51v-96.927C767 112.558 652.76 4 512 4S257 112.558 257 246.318v96.927h-51c-56.1 0-102 43.618-102 96.927v484.636c0 53.31 45.9 96.927 102 96.927h612c56.1 0 102-43.618 102-96.927V440.172c0-53.31-45.9-96.927-102-96.927zM512 779.418c-56.1 0-102-43.618-102-96.927 0-53.309 45.9-96.928 102-96.928s101.999 43.618 101.999 96.927c0 53.31-45.9 96.928-102 96.928z m158.1-436.173H353.9v-96.927c0-82.873 70.89-150.237 158.1-150.237s158.1 67.364 158.1 150.237v96.927z"
                    fill="#6E9FF4"
                    p-id="13613"
                  ></path>
                </svg>
              </span>
              <div class="underline-content">
                <div class="left">更换密码</div>
                <el-icon :size="16">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="block-content">
            <div class="container">
              <span class="icon">
                <svg
                  t="1730365753420"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1662"
                  width="200"
                  height="200"
                >
                  <path
                    d="M873.472 0H150.528C67.584 0 0 67.584 0 150.528v722.944C0 956.416 67.584 1024 150.528 1024h722.944c82.944 0 150.528-67.584 150.528-150.528V150.528C1024 67.584 956.416 0 873.472 0z m-61.952 656.896c0 41.472-33.792 74.752-74.752 74.752H287.232c-41.472 0-74.752-33.28-74.752-74.752V367.104c0-41.472 33.28-74.752 74.752-74.752h449.024c41.472 0 74.752 33.28 74.752 74.752v289.792z"
                    fill="#4873ED"
                    p-id="1663"
                  ></path>
                  <path
                    d="M712.192 427.008L512 556.032 311.808 427.008c-9.216-6.144-21.504-3.072-27.648 6.144-6.144 9.216-3.072 21.504 6.144 27.648l210.944 135.68c3.072 2.048 7.168 3.072 10.752 3.072 3.584 0 7.68-1.024 10.752-3.072L733.696 460.8a20.48 20.48 0 0 0 6.144-27.648 20.48 20.48 0 0 0-27.648-6.144z"
                    fill="#4873ED"
                    p-id="1664"
                  ></path>
                </svg>
              </span>
              <div class="underline-content">
                <div class="left">问题与反馈</div>
                <el-icon :size="16">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="block-content">
            <div class="container" @click="router.push('/home')">
              <span class="icon">
                <svg
                  t="1730366010487"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="15599"
                  width="200"
                  height="200"
                >
                  <path
                    d="M505.9 64.264C258.384 67.574 60.367 270.947 63.676 518.526c3.31 247.404 206.682 445.483 454.194 442.156 247.515-3.31 445.528-206.683 442.223-454.262C956.825 258.972 753.411 60.955 505.9 64.264z m49.686 149.392c45.554 0 58.997 26.404 58.997 56.65 0 37.779-30.264 72.701-81.854 72.701-43.163 0-63.695-21.729-62.477-57.591 0.018-30.241 25.357-71.76 85.334-71.76zM438.747 792.634c-31.142 0-53.937-18.913-32.167-102.03l35.71-147.34c6.19-23.627 7.215-33.085 0-33.085-9.306 0-49.753 16.328-73.659 32.4l-15.54-25.485c75.773-63.242 162.881-100.363 200.212-100.363 31.12 0 36.288 36.843 20.748 93.489l-40.919 154.944c-7.215 27.385-4.097 36.839 3.117 36.839 9.306 0 39.956-11.312 70.055-34.985l17.586 23.633c-73.614 73.612-153.959 101.983-185.143 101.983z m0 0"
                    fill="#2681FF"
                    p-id="15600"
                  ></path>
                </svg>
              </span>
              <div class="underline-content">
                <div class="left">关于系统</div>
                <el-icon :size="16">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const user = userStore.user

const detailHandle = () => {
  if (userStore.rule === 'admin') {
    router.push({ path: '/admin/detail', query: { id: user.id } })
  } else {
    router.push({ path: '/business/detail', query: { id: user.id } })
  }
}
</script>
<style scoped lang="scss">
.inner {
  height: 100%;
  overflow-anchor: none;
  position: relative;
  width: 100%;
}
.profile {
  margin: 0 auto;
  margin-bottom: 24px;
  max-width: 600px;
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
  height: 120px;
  width: 120px;
  cursor: pointer;
  overflow: hidden;
  img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
  }
}
.name {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
  font-size: 18px;
  .handleName {
    color: #999;
    font-size: 14px;
    font-weight: 500;
  }
}

.setting {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.block {
  max-width: 600px;
  padding: 0;
  width: 100%;
}
.block-content {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
  max-height: 100%;
  display: flex;
  cursor: pointer;
  width: 100%;
}
.container {
  align-items: center;
  display: flex;
  height: fit-content;
  padding-left: 16px;
  width: 100%;
  .icon {
    border-radius: 10px;
    height: 32px;
    margin-right: 16px;
    width: 32px;
  }
}
.underline-content {
  align-items: center;
  display: flex;
  flex: 1 1;
  min-height: 40px;
  padding: 12px 12px 12px 0;
  .left {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    justify-content: space-between;
    .content {
      width: 100%;
      font-weight: 500;
    }
  }
  .right {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: fit-content;
    width: fit-content;
  }
}
</style>
